<template>
  <div>
    <SearchDrop>
      <div slot="searchData">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="100px"
          :inline="true"
          class="demo-form-inline"
        >
          <el-form-item label="客户姓名" prop="customerName">
            <div class="nameBox">
                  <el-input
                    v-model="searchForm.customerName"
                    size="mini"
                  ></el-input>
                  <span>黑名单：</span>
                  <el-switch
                    :width="20"
                    v-model="switchValue"
                    active-color="#13ce66"
                    inactive-color="#aaa"
                  >
                  </el-switch>
                </div>
          </el-form-item>
          <el-form-item label="客户等级" prop="customerName">
            <el-select
              clearable
              v-model="searchForm.customerLevel"
              placeholder="请选择客户等级"
              size="mini"
            >
              <el-option label="A" value="A"></el-option>
              <el-option label="B" value="B"></el-option>
              <el-option label="C" value="C"></el-option>
              <el-option label="D" value="D"></el-option>
              <el-option label="无等级" value="E"></el-option>
              <el-option label="签单" value="F"></el-option>
              <el-option label="非签单" value="G"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="回退类型"
          >
            <el-select
              clearable
              v-model="searchForm.returnType"
              placeholder="请选择回退类型"
              size="mini"
            >
              <el-option
                v-for="(item, i) in returnTypeArr"
                :key="i"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="贷款意向" prop="customerName">
            <el-select
              clearable
              v-model="searchForm.loanInterest"
              placeholder="请选择贷款意向"
              size="mini"
            >
              <el-option label="房贷" value="A"></el-option>
              <el-option label="信贷" value="B"></el-option>
              <el-option label="顺位" value="C"></el-option>
              <el-option label="经营贷" value="D"></el-option>
              <el-option label="放大贷" value="F"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房产" prop="customerName">
            <el-select
              clearable
              v-model="searchForm.houseNumber"
              placeholder="请选择"
              size="mini"
            >
              <el-option label="有" value="1"></el-option>
              <el-option label="无" value="0"></el-option>
            </el-select>
          </el-form-item>
          <!--          <el-form-item label="意向金额" prop="customerName">-->
          <!--            <el-input v-model="searchForm.intendedMount" size="mini"></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="有无计划" prop="customerName">
            <el-select
              clearable
              v-model="searchForm.plan"
              placeholder="请选择"
              size="mini"
            >
              <el-option label="有" value="1"></el-option>
              <el-option label="无" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否意向" prop="intention">
            <el-select
              clearable
              v-model="searchForm.intention"
              placeholder="请选择"
              size="mini"
            >
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="backPath == 'CustCustomersList' ? true : false"
            label="回收时间"
            prop="customerName"
          >
            <el-date-picker
              size="mini"
              v-model="recoverTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="分配时间" class="date">
            <el-date-picker
              size="mini"
              v-model="disbutionTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="数据来源" prop="datafromAlias">
            <el-cascader
            filterable
              v-model="dataFrom"
              :default-checked-keys="dataFrom"
              :options="options2"
              :props="props2"
              clearable
              @change="setDatafromName"
              size="mini"
              ref="dataFrom"
              :show-all-levels="false"
              collapse-tags
            ></el-cascader>
          </el-form-item>
          <el-form-item
            :label="backPath == 'CustCustomersList' ? '前所属人' : '金融顾问'"
            prop="datafromAlias"
          >
            <el-cascader
            filterable
              v-model="customerMangers"
              :default-checked-keys="customerMangers"
              :options="options3"
              :props="props3"
              clearable
              @change="selCustomerMangers"
              size="mini"
              ref="customerMangers"
              :show-all-levels="false"
              collapse-tags
            ></el-cascader>
          </el-form-item>

          <el-form-item label="未联系天数" class="min">
            <div class="time_box">
              <el-input
                v-model.trim="searchForm.noStartContact"
                size="mini"
                placeholder="最小未联系天数"
              ></el-input>
              <span>-</span>
              <el-input
                v-model.trim="searchForm.noEndContact"
                size="mini"
                placeholder="最大未联系天数"
              ></el-input>
            </div>
          </el-form-item>

          <el-form-item label="导入时间" class="date">
            <el-date-picker
              size="mini"
              v-model="addTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="回退时间" class="date">
            <el-date-picker
              size="mini"
              v-model="returnTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="意向时间" class="date">
            <el-date-picker
              size="mini"
              v-model="intentionTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="创建时间"
            class="date"
            v-if="backPath == 'CustCustomersList' ? true : false"
          >
            <el-date-picker
              size="mini"
              v-model="createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="subBtn">
          <el-button
            size="mini"
            type="primary"
            @click="
              dialogVisible = false;
              onSubmit();
            "
            >搜索</el-button
          >
          <el-button size="mini" type="info" @click="resetForm('searchForm')"
            >重置</el-button
          >
        </div>
      </div>
    </SearchDrop>
  </div>
</template>

<script>
const cityOptions = ["房子", "保单", "公积金", "营业执照"];
import moment from "moment";
// 组件
import SearchDrop from "@/components/searchDrop.vue";
import Api3 from "@/http/apis/modules/uses.js";
import Api4 from "@/http/apis/modules/custManagement.js";
import loanChannelVue from "../views/layout/channelManagement/loanChannel.vue";
export default {
  props:{
    backPath:{
      type:String,
      default:"CustCustomersList"
    }
  },
  components: {
    SearchDrop,
  },
  data() {
    return {
      //回退类型数组
      returnTypeArr: [
        { label: "空号", value: "F" },
        { label: "三无", value: "G" },
        { label: "停机", value: "H" },
        { label: "无意向", value: "J" },
      ],
      //选数据来源
      dataFrom: [],
      props2: {
        value: "id",
        label: "datafromAlias",
        children: "child",
        multiple: true,
      },
      options2: [],
      //金融顾问多选
      customerMangers: [],
      props3: {
        value: "id",
        label: "name",
        children: "child",
        multiple: true,
        
      },
      options3: [],
      // title搜索部分
      qualification: cityOptions,
      switchValue:true,
      searchForm: {
        //资质：多选框
        qualification: null,
        // 搜索部分
        customerLevel: null, //客户等级
        returnType: null, //回退类型
        customerName: null, //客户姓名
        dataFrom: null, //数据来源
        customerMangers: null, //金融顾问多选

        focusOn: null, //是否关注
        departmentName: null, //前台部门
        houseNumber: null, //房产详情
        intendedMount: null, //意向金额(万元)
        loanInterest: null, //贷款意向
        managerName: null, //金融顾问
        plan: null, //有无计划
        intention: null, //有无计划
        signatureType: null, //签单类型
        tel1: null, //电话
        distributionStartTime: null, //分配时间开始
        distributionEndTime: null, //分配时间结束
        recoveryStartDate: null, //回收开始
        recoveryEndDate: null, //回收结束
        noStartContact: null, //未联系天数开始
        noEndContact: null, //未联系天数结束
        intentionStartDate: null, //意向开始时间
        intentionEndDate: null, //意向结束时间
        addStartDate: null, //导入开始时间
        addEndDate: null, //导入结束时间
        returnStartDate: null, //回退开始时间
        returnEndDate: null, //回退结束时间
        createStartDate: null, //创建开始时间
        createEndDate: null, //创建结束时间
        // 统计搜索条件
        disTime: null, //导入未分配
        isBackUnassigned: null, //回退未分配
        isCenterNewSign: null, //中心新分配
        tels: null, //广告客户数
        isSignUnassigned: null, //回收未分配
        /*==统计条件====*/
        isUnread: null,
        isConnected: null, //是否接通
        isUnContact: null, //是否联系
      },
      // 分配时间
      disbutionTime: [],
      recoverTime: [],
      intentionTime: [],
      addTime: [],
      returnTime: [],
      createTime: [],
    };
  },
  mounted() {},
  methods: {
    // 搜索
    onSubmit() {
      //分配时间
      if (!this.disbutionTime) {
        this.searchForm.distributionStartTime = null;
        this.searchForm.distributionEndTime = null;
      } else {
        this.searchForm.distributionStartTime = this.disbutionTime[0];
        this.searchForm.distributionEndTime = this.disbutionTime[1];
      }
      //回收时间
      if (!this.recoverTime) {
        this.searchForm.recoveryStartDate = null;
        this.searchForm.recoveryEndDate = null;
      } else {
        this.searchForm.recoveryStartDate = this.recoverTime[0];
        this.searchForm.recoveryEndDate = this.recoverTime[1];
      }
      //意向时间
      if (!this.intentionTime) {
        this.searchForm.intentionStartDate = null;
        this.searchForm.intentionEndDate = null;
      } else {
        this.searchForm.intentionStartDate = this.intentionTime[0];
        this.searchForm.intentionEndDate = this.intentionTime[1];
      }
      //导入时间
      if (!this.addTime) {
        this.searchForm.addStartDate = null;
        this.searchForm.addEndDate = null;
      } else {
        this.searchForm.addStartDate = this.addTime[0];
        this.searchForm.addEndDate = this.addTime[1];
      }
      //回退时间
      if (!this.returnTime) {
        this.searchForm.returnStartDate = null;
        this.searchForm.returnEndDate = null;
      } else {
        this.searchForm.returnStartDate = this.returnTime[0];
        this.searchForm.returnEndDate = this.returnTime[1];
      }
      //创建时间
      if (!this.createTime) {
        this.searchForm.createStartDate = null;
        this.searchForm.createEndDate = null;
      } else {
        this.searchForm.createStartDate = this.createTime[0];
        this.searchForm.createEndDate = this.createTime[1];
      }
      this.getStatistics();
      this.$emit("submit", this.searchForm,this.switchValue);
    },
    // 重置公共方法
    resetForm(formName) {
      this.searchForm = {};
      this.dataFrom = [];
      this.customerMangers = [];
      this.recoverTime = [];
      this.disbutionTime = [];
      this.intentionTime = [];
      this.addTime = [];
      this.returnTime = [];
      this.createTime = [];
      this.getStatistics();
      this.$emit("submit", this.searchForm,this.switchValue);
    },
    // 获取数据来源
    async getDataFrom() {
      let re = await Api3.getDataFromApi();
      this.options2 = re.data.result;
    },
    //选取数据来源赋值
    setDatafromName() {
      let perArr = [];
      this.dataFrom.forEach((item) => {
        perArr.push(item[item.length - 1]);
      });
      this.searchForm.dataFrom = perArr.length > 0 ? perArr : null;
    },
    // 获取金融顾问
    async text() {
      let re = await Api4.chooseMangerApi({
        userId: this.$store.state.user.userId,
      });
      this.options3 = re.data.result;
    },
    // 选取金融顾问赋值
    selCustomerMangers() {
      let perArr = [];
      this.customerMangers.forEach((item) => {
        perArr.push(item[item.length - 1]);
      });
      this.searchForm.customerMangers = perArr.length == 0 ? null : perArr;
    },
    getStatistics() {
      //导入未分配
      this.searchForm.disTime = this.$route.query.disTime
        ? this.$route.query.disTime
        : null;
      //回退未分配
      this.searchForm.isBackUnassigned = this.$route.query.isBackUnassigned
        ? this.$route.query.isBackUnassigned
        : null;
      //中心新分配
      this.searchForm.isCenterNewSign = this.$route.query.isCenterNewSign
        ? this.$route.query.isCenterNewSign
        : null;
      //广告客户数
      this.searchForm.tels = this.$route.query.tels
        ? this.$route.query.tels
        : null;
        // if(this.$route.query.tels){
        //   this.dataFrom = [[13, 14, 16]];
        //   // this.dataFrom = JSON.parse(
        //   //   localStorage.getItem("WL")
        //   // ).concat(JSON.parse(localStorage.getItem("DT")));
        //   // console.log("数据来源",this.dataFrom);
        // }
      //回收未分配
      this.searchForm.isSignUnassigned = this.$route.query.isSignUnassigned
        ? this.$route.query.isSignUnassigned
        : null;
      //签单未分配
      this.searchForm.customerLevel = this.$route.query.customerLevel
        ? this.$route.query.customerLevel
        : this.searchForm.customerLevel;
      // 客户等级
      this.searchForm.customerLevel = this.$route.query.customerLevel
        ? this.$route.query.customerLevel
        : this.searchForm.customerLevel;
      // 是否关注
      this.searchForm.focusOn = this.$route.query.focusOn
        ? this.$route.query.focusOn
        : this.searchForm.focusOn;
      // 是否意向
      this.searchForm.intention = this.$route.query.intention
        ? this.$route.query.intention
        : this.searchForm.intention;
      // 是否已读
      this.searchForm.isUnread = this.$route.query.isUnread
        ? this.$route.query.isUnread
        : this.searchForm.isUnread;
      // 是否接通
      this.searchForm.isConnected = this.$route.query.isConnected
        ? this.$route.query.isConnected
        : this.searchForm.isConnected;
      // 是否联系
      this.searchForm.isUnContact = this.$route.query.isUnContact
        ? this.$route.query.isUnContact
        : this.searchForm.isUnContact;
    },
  },
  created() {
    this.getStatistics();
    this.getDataFrom();
    this.text();
    // 回车触发搜索事件
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.$emit("submit", that.searchForm);
      }
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.has-time {
  color: red;
  position: absolute !important;
  top: -41px !important;
  left: 1140px !important;
}
//搜索表单样式
/deep/.el-form {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .el-form-item {
    width: 24%;
    margin-bottom: 0;
  }
  .el-form-item__content {
    width: 67%;
    .el-range-editor.el-input__inner {
      width: 100%;
    }
  }
  .nameBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      flex: 2;
    }
    .el-switch {
      flex: 1;
    }
    > span {
      color: #aaa;
      flex: 1;
      font-size: 12px;
    }
  }
  .time_box {
    display: flex;
    justify-content: center;
  }
  .el-cascader {
    width: 100%;
  }
}
</style>
